<template>
  <view class="p-price" :style="{'color':color,'lineHeight': Price1Size+'rpx','height': Price1Size+'rpx'}">
    <text class="tips" :style="[tipsStyle]">¥</text>
    <text class="price1" :style="[price1Style]">{{price1}}</text>
    <text class="price2" :style="[Price2Style]">{{price2}}</text>
  </view>
</template>

<script>
export default {
  name: 'XPrice',
  components: {},
  props: {
    price: {
      type: [String, Number],
      default: '0.00'
    },
    color: {
      type: String,
      default: '#DE3A2E'
    },
    TipsSize: {
      type: [String, Number],
      default: '28'
    },
    Price1Size: {
      type: [String, Number],
      default: '48'
    },
    Price2Size: {
      type: [String, Number],
      default: '36'
    }
  },
  data() {
    return {
      price1: '',
      price2: ''
    };
  },
  computed: {
    tipsStyle() {
      return {
        color: this.color ? this.color : '#DE3A2E',
        fontSize: this.TipsSize ? this.TipsSize + 'rpx' : '28rpx',
        marginRight: '4rpx'
      };
    },
    price1Style() {
      return {
        color: this.color ? this.color : '#DE3A2E',
        fontSize: this.Price1Size ? this.Price1Size + 'rpx' : '48rpx'
      };
    },
    Price2Style() {
      return {
        color: this.color ? this.color : '#DE3A2E',
        fontSize: this.Price2Size ? this.Price2Size + 'rpx' : '36rpx'
      };
    }
  },
  watch: {
    price(newPrice) {
      this.price = newPrice;
      this.initPrice();
    }
  },
  created() {
    this.initPrice();
  },
  mounted() {

  },
  methods: {
    initPrice() {
      let nowPrice = this.price;
      // if (nowPrice.indexOf('.') > -1) {
      nowPrice = parseFloat(nowPrice).toFixed(2);
      this.price1 = nowPrice.substring(0, nowPrice.length - 3);
      this.price2 = nowPrice.slice(nowPrice.length - 3);
      // }
    }
  }
};
</script>

<style lang="scss">
.p-price{
  display: inline-block;
  color: #DE3A2E;
  font-weight: bold;
  .price1{
    font-size: 48px;
  }
  .price2{
    font-size: 36px;
  }
}
</style>
